<template>
<view>
    <view class="uni-common-mt">
        <view v-if="mapStatus">
            <map class="map" :latitude="data.transporterLat" :longitude="data.transporterLng" :markers="covers" v-if="mapCanLoad" @callouttap="onmarkertap" @markertap="onmarkertap">
            </map>
            <view class="footer ">
                <image class="img" src="../static/images/voice.png"></image>
                <view class="gray_font" style="font-size:26rpx;">
                    受疫情影响，请联系骑手将商品放置制定位置（家门口等）；若已封闭管理，速致电骑手协商
                </view>

            </view>

            <view class="footer">
                <view class="footerView" @click="callStore(data.doctorPhone)">
                    <image src="../static/images/phone.png" mode="" />
                    联系商家
                </view>
                <view class="footerView" v-if="data.statusCode!=1" @click="callStore(data.transporterPhone)">
                    <image src="../static/images/phone.png" mode="" />
                    致电骑手
                </view>
            </view>
        </view>

    </view>
    <!-- 
    <view style="padding:0 8rpx;" v-if="Object.keys(info).length>0">
        <view class="card">
            <view class="box-top">
                <view class="addTime">
                    快递公司：{{ info.expName?info.expName:"" }}
                    <text style="margin-left: 40rpx;color: #cccccc;font-size: 24rpx;" @click="call()">打电话</text>
                </view>

                <view class="addTime type">
                    <view>{{status[info.deliverystatus]}}</view>
                </view>
            </view>
            <view v-if="info.number" class="con title addTime">快递单号：
                <text class="title_n">{{ info.number }}</text>
                <text style="margin-left: 40rpx;color: #cccccc;font-size: 24rpx;" @click="copy()">复制</text>
            </view>
            <view class="box-top">
                <view v-if="info.takeTime" class="addTime">
                    用时时长：{{ info.takeTime }}
                </view>
            </view>
        </view>
        <view class="steps">
            <uni-steps :options="info.list" active-color="#52D0BB" :active="active" direction="column" />
        </view>
    </view> -->
    <!-- <view class="noInfo_Img" v-else-if="showNoInfo">
        <image src="../static/images/icon_lack_message@2x.png"></image>
    </view> -->
</view>
</template>

<script>
import {
    getGoodOrder,
    getposition
} from '@/api/my.js';
import UniCard from "../../uni_modules/uni-card/components/uni-card/uni-card";
export default {
    components: {
        UniCard
    },
    data() {
        return {
            mapStatus: true, //是否显示地图
            mapCanLoad: true, //
            covers: [], //地图的标记点
            // latitude:0, //纬度
            // longitude:0, //经度
            latitude: 36.70997,
            longitude: 119.131835,
            data: {}, //快递详情
            info: {},
            showNoInfo: false,
            status: {
                0: '快递揽件',
                1: '在途中',
                2: '正在派件',
                3: '已签收',
                4: '派送失败',
                5: '疑难件',
                6: '退件签收'
            },
            // 快递状态码
            statusCode: {
                1: '商品待接单',
                2: '商品待取货',
                3: '骑手正在送货',
                4: '商品已送达',
                5: '用户已取消',
                8: '指派单',
                9: '妥投异常之物品返回中',
                10: '妥投异常之物品返回完成',
                100: '骑士已到店',
                1000: '创建达达运单失败'
            },
            orderId: ''
        }
    },
    onLoad: function (option) {
        let _this = this;

        _this.orderId = option.orderId;
        // this.getDetail();
        // 查询快递位置
        this.getPosition()
    },

    methods: {

        // 拨打电话
        callStore(number) {
            uni.makePhoneCall({
                phoneNumber: number  || '15205454414'
            })
        },
        // 查询快递位置
        getPosition() {
            getposition(this.orderId).then(res => {
                console.log(res, '快递详情999')
                this.data = res.data;
                // return
                let code = res.data.statusCode
                let distance = res.data.distance ;
                let time = '3'; // 缺少剩余时间
                var content = ''; // 
                if (code) {
                    if (code == 3) {
                        content = `${this.statusCode[code]} \n 距您还有 ${distance}米`;
                    } else {
                        content = `${this.statusCode[code]}`;
                    }
                }
                console.log(content, 'content000---')
                // this.covers[0].callout.content = content
                this.covers.push({
                    id: 120, // Number(res.data.orderId)
                    latitude: res.data.transporterLat,  // 36.70997,
                    longitude:  res.data.transporterLng, // 经度119.131835,
                    iconPath: '../static/images/dada.png',
                    width: 40,
                    height: 40,
                    callout: {
                        content: content,
                        // content: item.storeName+'\n'+item.storeAddress+'\n电话：'+item.storePhone,
                        textAlign: 'center',
                        fontSize: 13,
                        color: '#000000',
                        borderRadius: 4,
                        padding: 4,
                        display: 'ALWAYS'
                    },
                    // 自定义气泡
                    // customCallout: {
                    //     anchorX: 0,
                    //     anchorY: 0,
                    //     display: "ALWAYS"
                    // }

                })

            })
        },
        goto(url) {
            uni.navigateTo({
                url: url
            })
        },
        // getDetail() {
        //     uni.showLoading({
        //         title: '加载中'
        //     });
        //     // console.log(this.orderId);
        //     getGoodOrder(this.orderId).then(res => {
        //         this.info = res.data.data;
        //         this.info.list = this.info.list.map(item => ({
        //             title: item.status,
        //             desc: item.time
        //         }));
        //         // console.log(JSON.stringify(this.info.list));
        //         // console.log(this.info+'shuju123');
        //         uni.hideLoading();
        //     }).catch(res => {
        //         // this.info='';
        //         this.showNoInfo = true;
        //         // console.log(this.showNoInfo+'shuju');
        //         uni.hideLoading();
        //     });

        // },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.info.expPhone //仅为示例
            });
        },
        copy() {
            uni.setClipboardData({
                data: this.info.number,
                success: function () {
                    // console.log('success');
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #FFFFFF;
}

.map {
    width: 100%;
    min-height: 1000rpx;
}

.footer {
    padding: 20rpx;
    margin: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-around;
}

.img {
    height: 60rpx;
    width: 60rpx;
    margin-right: 10rpx;
}

.footerView {
    display: flex;
    line-height: 50rpx;

    image {
        height: 50rpx;
        width: 50rpx;
        margin-right: 10rpx;
    }
}

.title {
    text-align: center;
}

.con {
    line-height: 42rpx;
    text-align: justify;
    text-align-last: left;
}

.title_n {
    margin-left: 10rpx;
}

.addTime {
    font-size: 30rpx;
    line-height: 80rpx;
}

.box-top {
    display: flex;
    justify-content: space-between;
}

.card {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
}

.uni-card__content--pd {
    padding: 24rpx 14rpx;
}

.type {
    font-size: 32rpx;
    color: #4CCDBC;
    background-color: #E1FFFB;
    border-radius: 20rpx;
    padding: 2rpx 10rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    margin-left: 10rpx;
}

.steps {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 4rpx;
}
</style>
